<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" version="4.0"/>
<xsl:template match="/">
  <html>
  	<head>
		<script type="text/javascript" src="javascript/mootools1.2.3.js"></script>
		<script type="text/javascript" src="javascript/sortableTable.js"></script>
		<script type="text/javascript" src="javascript/movies.js"></script>
		<link rel="stylesheet" href="css/main.css" type="text/css" />
		<link rel="stylesheet" href="css/sortableTable.css" type="text/css" />
		<title>MediaPortal Movies</title>
  	</head>
  <body>
	<div id="mainbg"> 
      <div id="nestedbg" class="clearfix"> 
        <div id="main-topborder"> 
          <div id="mainbuttonbar"> 
				Moving Pictures Statistics
			</div> 
        </div> 
        <div id="main-container" class="clearfix"> 
          <table>
			<tr>
				<td class="statslabel">Movie Count:</td><td class="stats"><xsl:value-of select="ROOT/STATS/MOVIECOUNT"/></td>
			</tr>
			<tr>
				<td class="statslabel">Movies Watched:</td><td class="stats"><xsl:value-of select="ROOT/STATS/MOVIEPLAYS"/></td>
			</tr>
			<tr>
				<td class="statslabel">Last Watched:</td><td class="stats"><xsl:value-of select="ROOT/STATS/LASTWATCHED/TITLE"/></td>
			</tr>
			<tr>
				<td class="statslabel">Last Updated:</td><td class="stats"><xsl:value-of select="ROOT/LASTUPDATE"/></td>
			</tr>
		  </table>
        </div> 
        <div id="main-botborder"></div> 
		<!-- Movie content -->
        <div id="main-topborder"> 
          <div id="mainbuttonbar"> 
				<div class="buttonbarleft">MediaPortal Movie List</div>
				<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;" class="buttonbarright">
					Search: 
					<select id="column"> 
						<option value="0">Title</option>
						<option value="1">Year</option>
						<option value="2">Genres</option>
						<option value="3">Score</option>
						<option value="4">Codec</option>
						<option value="5">Resolution</option>
						<option value="6">Runtime</option>
					</select> 
					<input type="text" id="keyword" />
					<input type="submit" value="Submit" />
					<input type="reset" value="Clear" /> 
				</form>
          </div> 
        </div> 
        <div id="main-container" class="clearfix"> 
			<table id="sortedTable" border="0" class="content">
			  <thead>
				<th axis="string" style="width:200px;">Title</th>
				<th axis="number">Year</th>
				<th axis="string">Genres</th>
				<th axis="number">Score</th>
				<th axis="string">Codec</th>
				<th axis="string">Res.</th>
				<th axis="number">Runtime</th>
			  </thead>
			  <xsl:for-each select="ROOT/MOVIES/MOVIE">
			  <tr class="movieRow">
				<xsl:attribute name="id">
				 <xsl:value-of select="ID" />
				</xsl:attribute>
				<td class="movieTitle"> 
					<a target="blank">
						<xsl:attribute name="href">http://www.imdb.com/title/<xsl:value-of select="IMDB_ID"/></xsl:attribute><xsl:value-of select="TITLE"/>
					</a>
				</td>
				<td class="movieYear"><xsl:value-of select="YEAR"/></td>
				<td class="movieGenres"><xsl:value-of select="GENRES"/></td>
				<td class="movieScore"><xsl:value-of select="SCORE"/></td>
				<td class="movieCodec"><xsl:value-of select="VIDEOCODEC"/></td>
				<td class="movieResolution"><xsl:value-of select="VIDEORESOLUTION"/></td>
				<td class="movieLength"><xsl:value-of select="RUNTIME"/></td>
			  </tr>
			  </xsl:for-each>
			</table>
		  </div> 
        <div id="main-botborder"></div> 
      </div> 
    </div> 
	<script type="text/javascript">
		var myTable = new sortableTable('sortedTable', {
			overCls: 'over', onClick: function(){alert(this.id)}, sortOn: '-1'
		});
	</script>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>